<script setup>
import { useUserFollowListQuery } from '@/composables/useUserInfoQuery'
import { useRoute } from 'vue-router'
import FansListItem from '../FansListItem.vue'
const route = useRoute()

const routeUid = ref(route.params.uid)

const { data, fetchNextPage, hasNextPage, isFetching, isLoading, isError } = useUserFollowListQuery(routeUid)

const flattenedData = computed(() => data.value?.pages.flatMap((page) => page.data ?? []))
const loadMore = () => {
  if (isFetching.value) return
  fetchNextPage()
}

watch(route, (newRoute, oldRoute) => {
  routeUid.value = newRoute.params.uid
})
</script> 

<template>
  <div class="" v-infinite-scroll="loadMore">
    <LfEmpty v-if="flattenedData?.length === 0" emptyText="暂无关注" />

    <div
      v-else
      class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-[50px] w-[90%] max-w-[1500px] justify-center ">
      <FansListItem v-for="item in flattenedData" :key="item.id" :item="item" />
    </div>
  </div>
</template>
